package com.promise.jokerdream.ui.webview

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import com.promise.jokerdream.ui.theme.AppFontSizes
import com.promise.jokerdream.utils.FontSizePreferenceManager

/**
 * 字体大小调整弹窗
 * 精简设计，实时预览
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FontSizeDialog(
    show: Boolean,
    currentFontSize: Int,
    onDismiss: () -> Unit,
    onFontSizeChange: (Int) -> Unit
) {
    if (show) {
        var sliderValue by remember(currentFontSize) { mutableStateOf(currentFontSize.toFloat()) }
        
        // 当对话框显示时，同步 sliderValue
        LaunchedEffect(show, currentFontSize) {
            if (show) {
                sliderValue = currentFontSize.toFloat()
            }
        }
        
        Dialog(onDismissRequest = onDismiss) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(24.dp),
                shape = RoundedCornerShape(16.dp),
                colors = CardDefaults.cardColors(
                    containerColor = MaterialTheme.colorScheme.surface
                )
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 20.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    // 标题（包含百分比）
                    Text(
                        text = "字体大小：${sliderValue.toInt()}%",
                        fontSize = AppFontSizes.h4,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 20.dp)
                    )
                    
                    Spacer(modifier = Modifier.height(12.dp))
                    
                    // 进度条
                    Slider(
                        value = sliderValue,
                        onValueChange = { newValue ->
                            sliderValue = newValue
                            // 实时预览：拖动时立即应用到 WebView并保存
                            onFontSizeChange(newValue.toInt())
                        },
                        valueRange = FontSizePreferenceManager.MIN_FONT_SIZE.toFloat()..FontSizePreferenceManager.MAX_FONT_SIZE.toFloat(),
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp),
                        track = { sliderState ->
                            SliderDefaults.Track(
                                modifier = Modifier.height(8.dp),
                                colors = SliderDefaults.colors(
                                    activeTrackColor = MaterialTheme.colorScheme.primary,
                                    inactiveTrackColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.3f)
                                ),
                                sliderState = sliderState,
                                drawStopIndicator = {}, // 去掉小圆点
                                thumbTrackGapSize = 0.dp // 去掉滑块和轨道之间的间隙
                            )
                        },
                        thumb = {
                            Box(
                                modifier = Modifier
                                    .size(16.dp)
                                    .shadow(6.dp, CircleShape)
                                    .background(MaterialTheme.colorScheme.primary, CircleShape)
                            )
                        }
                    )
                }
            }
        }
    }
}

